<template>
  <view class="container">
    <!-- 列表页 -->
    <view class="card-list">
      <view
        class="card"
        v-for="(item, index) in siteInfo"
        :key="index"
        @click="goOperateDetails(item.id)"
      >
        <view class="list-item">
          <view class="status-container">
            <div>{{ item.name1}}</div>
            <u-icon
                    name="arrow-right"
                    size="16"
                    color="#C0C0C0"
                    class="arrow-icon"
            ></u-icon>
          </view>
        </view>
        <view class="list-item1">
          <text>当前：{{ item.name2 }}</text>
          <text>{{ item.name3 }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
        siteInfo:[
          {
            id: 1,
            name1: '鄂安检000780',
            name2: '',
            name3: '完结'
          },
          {
            id: 2,
            name1: '鄂安检000747',
            name2: '',
            name3: '完结'
          },
          {
            id: 3,
            name1: '鄂安检420000000676',
            name2: '',
            name3: '完结'
          }
        ]
    };
  },
  methods: {
    // 其他方法
    goOperateDetails(id) {
      uni.redirectTo({
        url: "/pages/hub_ygzw/supervision/messagePushDetails?id=" + id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  height: 100vh;
  width: 100%;
}

.card-list {
  padding: 10px;

  .card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    padding: 20px;
    .list-item {
      display: flex;
      .status-container {
        display: flex;
        align-items: center;
        white-space: nowrap; /* 防止换行 */
        .arrow-icon {
          margin-left: 5px;
        }
      }
    }
    .list-item1 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      height: 32px;
      background: #fafafb;
      border-radius: 3px;
    }
  }
}
</style>
